<template>
  <div class="home">
    <main>
      <router-view />
    </main>

    <footer>
      <van-tabbar @change="changeActive" v-model="active">
        <van-tabbar-item
           v-for="(item, index) in list"
           :key="index"
           :badge="item.badge? allCount: ''"
           :icon="item.icon">
            {{ item.title }}
           </van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "Home",
   data() {
    return {
      active: 0,
      list: [
        {
          icon: "home-o",
          path: "/home/homes",
          title: "配送"
        },
        {
          icon: "search",
          path: "/home/classify",
          title: "分类"
        },
        {
          icon: "friends-o",
          path: "/home/car",
          title: "购物车",
          badge: true
        },
        {
          icon: "setting-o",
          path: "/home/my",
          title: "我的"
        }
      ]
    };
  },
  computed: {
    ...mapGetters(['allCount'])
  },
  methods: {
    changeActive(index) {
      this.$router.push(this.list[index].path)
    }
  }
};
</script>

<style scoped>
.home {
  height: 100%;
}
</style>
